<template>
  <div>
    <div class="top">
      <Timer/>
      <weather/>
    </div>
    <div>
      <el-row>
        <el-col :span="4">
          <h4>任务导航介绍栏</h4>
          <el-menu
              class="el-menu-vertical-demo"
              default-active="1"
          >
            <el-menu-item-group>
              <el-menu-item @click="overview" index="1">
                <i class="el-icon-location"></i>
                总览
              </el-menu-item>
              <el-menu-item @click="jobList">
                <i class="el-icon-menu"></i>
                工作任务列表
              </el-menu-item>
              <el-menu-item @click="employeeList">
                <i class="el-icon-s-check"></i>
                部门员工信息列表
              </el-menu-item>
              <el-menu-item @click="report" >
                <i class="el-icon-document"></i>
                在线任务报表
              </el-menu-item>
            </el-menu-item-group>
            <!--          </el-submenu>-->
          </el-menu>
        </el-col>
        <el-col :span="20">
          <router-view></router-view>
        </el-col>
      </el-row>
    </div>
  </div>


</template>

<script>
import Timer from "@/components/Timer";
import Weather from "@/components/Weather";
export default {
  name: "Home",
  components: {Weather, Timer},
  methods:{
    report(){
      this.$router.push('/home/job-report')
    },
    overview(){
      this.$router.push('/home/overview')
    },
    jobList(){
      this.$router.push('/home/job-list')
    },
    employeeList(){
      this.$router.push('/home/employee-list')
    }

  }
}
</script>

<style scoped>
/*body{*/
/*  background-color: green;*/
/*}*/
.top{
  width:300px;
  height: 50px;
  justify-content: center;
  margin: 2px auto;
}

h4{
color: white;
}

</style>